<template>
<div class="pt44">
    <div class="page_top borderTop1">
        <div class="top-title"><span>交易明细： </span><span>{{ recordingTime }}</span></div>
        <div class="weui-flex tc">
            <div class="weui-flex__item">
                <div><i class="drje-icon t_icon"></i></div>
                <div class="placeholder translucent">当日交易金额(元)</div>
                <div id="balance">{{ transAmt }}</div>
            </div>
            <div class="weui-flex__item">
                <div><i class="drbs-icon t_icon"></i></div>
                <div class="placeholder translucent">当日交易单数</div>
                <div id="djs_money">{{ transCount }}</div>
            </div>
        </div>
    </div>
    <div class="btn-area">
        <router-link to="/record" class="weui-btn weui-btn_mini weui-btn_primary">查询</router-link>
    </div>
    <div class="weui-flex tc content">
        <router-link to="/scanCode" class="weui-flex__item right_onePx">
            <div class="placeholder"><i class="sc-icon c_icon"></i></div>
            <div>交易扫码</div>
        </router-link>
        <router-link to="/userSetting" class="weui-flex__item right_onePx">
            <div class="placeholder"><i class="sz-icon c_icon"></i></div>
            <div>用户设置</div>
        </router-link>
        <div id="settingBtn" class="weui-flex__item right_onePx">
            <div @click="getMerQrCode" class="placeholder"><i class="ewm-icon c_icon"></i></div>
            <div>商户二维码</div>
        </div>
    </div>
    <div class="js_dialog" v-show="showMerQrCode" id="merQrCodeDialog">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">{{ merchantName }}</strong><i @click="closeMerQrcode"  class="fa fa-times"  aria-hidden="true"></i></div>
            <img class="merQrCodeImg" src="" />
        </div>
    </div>
</div>
</template>

<script>
var cm = require("../components/common.js");
export default  {
    name: 'MerchantHome',  // 商户首页
    data () {  // 数据
        return {
          msg: 'MerchantHome',
          recordingTime:"",
          showMerQrCode:false,
          merchantName:"",
          transCount:"",
          transAmt:""

        }
    },
    methods:{ // 自定义方法，可对data进行处理
        getMerQrCode(){  // 取商户二维码
            var qrParameters = {
                "tl_mer_no": this.$store.state.loginName
            }
            $.post(GetQrCodeServlet_URL, qrParameters, function merQrCodeCallBack(msg) {
                console.dir(msg);
                this.showMerQrCode = true;
                if (msg.login_response) {
                    cm.haslogin(msg);
                    return;
                }
                var tiket = msg.lfq_merinfo_response.mer_ticket;
                if (tiket) {
                    $("#merQrCodeDialog img").attr("src", "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + tiket);
//                    $("#qrcode-name").text(corpAbbr);
//                    showMerQrCode();
                } else {
//                    errorObject.showErroDialog("该商户未设置二维码");
                }

            }.bind(this))
        },
        closeMerQrcode(){
            this.showMerQrCode = false;
        },
        turnover(tdata){  // 处理交易数据
            this.transCount = tdata.trans_count;
            this.transAmt = tdata.trans_amt;
            this.recordingTime = cm.getDateStrFormate1(tdata.res_timestamp,"date")
        },
        getDayDate(){ // 取当天的交易数据
            var bsParaments = {
                    token:this.$store.state.token,
                    loginName:this.$store.state.loginName,
                    openid:this.$store.state.openid,
                    bizLicNo:this.$store.state.loginName,
                    loginType:"1",
                    prdtNo:"0301"
            }
            var _this = this;
            $.post(BalanceServlet_URL,bsParaments,function(bsdata) {
                console.dir(bsdata);
                if(bsdata.mer_acct_response){
                    _this.turnover(bsdata.mer_acct_response);
                }
                sessionStorage.setItem("bank_id", bsdata.mer_acct_response.bank_id); // 取现银行卡号
        //        sessionStorage.setItem("valid_balance", response.valid_balance); // 取现 参数valid_balance
                _this.$store.state.headerTitle = bsdata.mer_acct_response.corp_abbr;
                _this.$store.state.mer_id = bsdata.mer_acct_response.mer_id; // 商户号
                sessionStorage.setItem("corp_abbr", bsdata.mer_acct_response.corp_abbr); // 商户简称
            })

        }
    },
    beforeMount:function() {
        this.$store.state.loginType = "1";
        this.$store.commit("getSelectionInfo");
        this.getDayDate();
    },
    mounted:function  () {
        this.$store.commit("getprdtNo");
    }
}
</script>

<style lang='scss' scoped>
.page_top{
    padding: 0 15px 20px 15px;
    background-color: #2792e4;
    color: #fff;
}
.t_icon{
    display:inline-block;
    width: 30px;
    height:30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.drje-icon{
    background-image: url(../assets/images/jiaoyibishu_icon.png);
}
.drbs-icon{
    background-image: url(../assets/images/jiaoyidanshu_icon.png);
}


.sz-icon{
    background-image: url(../assets/images/yonghushezhi_icon.png);
}


.top-title{
    padding: 15px 0 25px 0;
}
.btn-area{
    text-align: center;
    padding: 15px 0 20px 0;
    background: #fff;
    .weui-btn_mini{
        width: 150px;
        height: 35px;
        line-height: 35px;
        border-radius: 18px;
    }
}
.content{
    margin-top: 10px;
    padding: 23px 0;
    background: #fff;
}
#merQrCodeDialog{
   .weui-dialog {
        max-width: 250px;
        width: 240px;
        height: 270px;
    }
    i {
        position: absolute;
        width: 30px;
        display: inline-block;
        height: 21px;
        padding-right: 5px;
        padding-top: 5px;
        top: 0px;
        right: 0px;
    }
}

.fa-times {
    font-size: 16px;
    padding: 3px 5px 0 0;
    &:before {
        content: "X";
    }
}
.merQrCodeImg{
    width: 450px;
    height: 430px;
    transform: scale(0.5);
    margin-top: -115px;
    margin-left: -103px;
    border-width: 0px;
}
</style>
